<template>
	<view id="feature-content">
		<view class="main-title">内容精选</view>
		<view class="sub-title">Featured Content</view>
		<scroll-view class="row-wrapper" scroll-x="true">
			<view @click="redirectTo(v)" class="item" v-for="(v, k) in row1"
				:key="k">
				<image :src=" domain + v.img"></image>
			</view>
		</scroll-view>
		<scroll-view class="row-wrapper" scroll-x="true" style="margin-top: 0rpx;">
			<view @click="redirectTo(v)" class="item" v-for="(v, k) in row2"
				:key="k">
				<image  :src=" domain + v.img"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	// 黄玺 @ 2023-4-19
	import { domain } from '../../stores/useApp.js'
	import {
		ref
	} from 'vue';
	let row1 = [{
			img: "/static/DigitalPlatform/迁台渊源.png",
			title: "迁台渊源",
			url: "relocation"
		},
		{
			img: "/static/DigitalPlatform/发展历程.png",
			title: "发展历程",
			url: "History"
		},
		{
			img: "/static/DigitalPlatform/林氏家系.png",
			title: "林氏家系",
			url: "LinFamilyLineage"
		},
		{
			img: "/static/DigitalPlatform/家国情怀.png",
			title: "家国情怀",
			url: "HomeAndCountryFeelings"
		},
	]
	let row2 = [{
			img: "/static/DigitalPlatform/宗祠家庙.png",
			title: "宗祠家庙",
			url: "AncestralTemple"
		},
		{
			img: "/static/DigitalPlatform/文书档案.png",
			title: "文书档案",
			url: "Paperwork"
		},
		{
			img: "/static/DigitalPlatform/两岸交流.png",
			title: "两岸交流",
			url: "exchange"
		},
		// {
		// img: "../../static/DigitalPlatform/林氏足迹.png",
		// 	title: "林氏足迹",
		// 	url: "LinFamilyLineage"
		// },
	]
	function redirectTo(item) {
		let url = `/pages/DigitalPlatform/${item.url}?title=${item.title}`;
		uni.redirectTo({
			url
		})
	}
</script>

<style lang="less">
	@import url(shared.less);

	#feature-content {
		height: 100vh;
		overflow: hidden;
		background: #a0adbf;
		padding-top: 84rpx;
		box-sizing: border-box;

		.main-title {
			font-size: 50rpx;
			line-height: 55rpx;
			text-align: center;
			color: #fff;
		}

		.sub-title {
			font-size: 45rpx;
			line-height: 50rpx;
			text-align: center;
			margin-top: 5rpx;
			color: #fff;
		}

		.row-wrapper {
			margin: 85rpx 50rpx 15rpx 50rpx;
			width: calc(100vw - 100rpx);
			white-space: nowrap;

			.item {
				display: inline-block;
				margin: 15rpx;
				width: 220rpx;
				height: 415rpx;
				background-size: cover;
				background-position: 50% 50%;
				background-repeat: no-repeat;
				position: relative;
				border-radius: 5px;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>